<template>
	<view class="page-container">
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      :bar-width="150"
      @change="handleChangeTab"
    />
    
    <view class="body-wrapper">
      <CalendarWeekly v-if="current===0" />
      <CalendarMonth v-if="current===1" />
      <view class="course-summary-wrapper" v-if="current===2" v-for="item in summaryList" :key="item.id">
        <CourseSummaryCard :data="item" />
      </view>
    </view>
	</view>
</template>

<script>
  import CalendarMonth from '@/pages/course-schedule/components/calendar-month'
  import CalendarWeekly from '@/pages/course-schedule/components/calendar-weekly'
  import CourseSummaryCard from '@/pages/course-schedule/components/course-summary-card'
    
  export default {
    components: {
      CalendarMonth,
      CalendarWeekly,
      CourseSummaryCard,
    },
    data() {
      return {
        list: [{
          name: '周课表'
        }, {
          name: '月考情'
        }, {
          name: '课时统计'
        }],
        current: 0,
        summaryList: [
          {
            id: 1,
            organization: '小犀科技',
            courseName: '初级班',
            startTime: '2021-6-1',
            endTime: '2021-12-30',
            expired: '2021-12-30',
            courseCount: 50,
            courseRest: 10,
          }
        ],
      };
    },
    methods: {
      handleChangeTab(index) {
        this.current = index;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page-container {
    .body-wrapper {
      .course-summary-wrapper {
        padding: 32rpx;
      }
    }
  }
</style>
